<template>
  <div>
    <h1>Header</h1>
    <p>电影的列表总长度是{{movieList.length}}</p>
    <p>Count的值是{{count}}</p>
    <p>价格{{price}}</p>
    <button @click="increament">累加的count</button>
    <button @click="decreament">累减的count</button>
    <button @click="increamentN({n:3})">Count的值每次加n</button>
    <button @click="increamentWait">等一等再加</button>
    <button @click="increamentNWait({n:5})">等一等再加N</button>
  </div>
</template>

<script>
import {mapMutations, mapState,mapActions} from "vuex"
export default {
name: "Header",
computed:{
    //直接使用mapState去获取store中的值,并且提供了计算属性给我们,我们展开放在computed中

...mapState(["count","price","movieList"])
},
methods:{
 ...mapMutations(["increament","increamentN","decreament"]),
 
 ...mapActions(["increamentWait","increamentNWait"])
//  increamentWait(){
//  //分发action 使用$store.dispatch()方法
//  this.$store.dispatch("increamentwait")

//  },
//  increamentNWait(payload){
//  this.$store.dispatch("increamentNWait",payload)

//  },

}
}
</script>

<style>

</style>